<!-- 1 -->
<template>
  <div class="hello">
    <Button @click="handleRender">实例化使用方法</Button>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {}
    },
    methods: {
      handleRender() {
        this.$Modal.confirm({
          render: (h) => {
            return h('Input', {
              props: {
                value: this.value,
                autofocus: true,
                placeholder: 'Please enter your name...'
              },
              on: {
                input: (val) => {
                  this.value = val;
                }
              }
            })
          }
        })
      }
    }
  }
</script>
<style scoped></style>
<!-- 2 -->
<template>
  <div class="hello">
    <Button @click="handleRender">实例化使用方法</Button>
  </div>
</template>
<script>
  const FirsModal = () => import("../components/FirstModal.vue");
  export default {
    name: 'HelloWorld',
    data() {
      return {}
    },
    methods: {
      handleRender() {
        this.$Modal.confirm({
          title: 'demo',
          render: (h) => {
            return h(FirsModal, { //在此处使用引入的组件
              ref: 'firsModal'
            })
          },
          width: 600,
          closable: false,
          okText: "确定",
          cancelText: "取消",
          loading: true,
          onOk() {}
        });
      }
    }
  }
</script>
<style scoped></style>
<!-- 3 -->
<template>
  <div>
    <Button type="primary" @click="modal1 = true">普通组件使用方法</Button>
    <Modal v-model="modal1" title="普通组件使用方法" @on-ok="ok" @on-cancel="cancel">
      <h1>普通组件使用方法</h1> //自定义内容
    </Modal>
  </div>
</template>
<script>
  export default {
    name: "normalModal",
    data() {
      return {
        modal1: false
      }
    },
    methods: {
      ok() {},
      cancel() {}
    }
  }
</script>
<style scoped></style>

<!-- 4 -->
<template>
  <div>
    <Button type="primary" @click="modal1 = true">普通组件使用方法</Button>
    <Modal v-model="modal1" title="普通组件使用方法" @on-ok="ok" @on-cancel="cancel">
      <FirsModal></FirsModal>//使用自定义组件
    </Modal>
  </div>
</template>
<script>
  //引入自定义组件（弹窗的内容写在FirstModal组件内）
  const FirsModal = () => import("../components/FirstModal.vue");
  export default {
    name: "normalModal",
    data() {
      return {
        modal1: false
      }
    },
    methods: {
      ok() {},
      cancel() {}
    },
    components: {
      FirsModal //定义自定义组件
    }
  }
  
 render: (h, params) => {
   return h(
     "Button", {
       props: {
         size: "small"
       },
       style: {
         color: '#000',
         height: '22px',
         marginLeft:'2px',
         padding: '0 5px',
         fontSize: '12px'
       },
       on: {
         click: () => {
           this.$Modal.confirm({
             this.modal=true;
             width: 300,
             okText: '保存',
             render: (h) => {
               return h(modal2, { //在此处使用引入的组件
                 ref: 'modal2',
                 on: {
                 }
               })
             },
             onOk() {
               if (this.v1=='') {
                     this.$Message.err('信息填写不完整!');
                   }
               const msg = this.$Message.loading({
                 content: '正在保存..',
                 duration: 0
               })
               this.saveLink(msg)
             }
       
             title: '请输入新密码',
             content: '<i-input size="large"></i-input>',
             okText: 'OK',
             cancelText: 'Cancel'
       
             render: (h) => {
               return h(div,{}),
               h('Input', {
                 props: {
                   value: this.value,
                   autofocus: true,
                   placeholder: '请输入密码'
                 },
                 on: {
                   input: (val) => {
                     this.value = val;
                   }
                 }
               })
             }
           })
          }
        }
       })
      }
    
  
</script>
<style scoped></style>

作者：烧仙草VB
链接：https://www.imooc.com/article/255085
来源：慕课网
